﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["Title"] = "湖北省检察院档案管理系统 - 库藏统计";
}

@section Head{
    <link rel="stylesheet" href="~/layuiadmin/style/statistics.css" media="all">
}

<div class="yarding-body layui-form layui-fluid">
    <div class="layui-tab layui-tab-card" lay-filter="tab-echart">
        <ul class="layui-tab-title layui-Statis2-ul">
            <li class="layui-this">
                <span class="title-yck">诉讼统计表</span>
                <select class="" title="诉讼统计表">
                    <option value="ss1">诉讼案卷归档目录一览表</option>
                    <option value="ss2">诉讼案卷卷册页数量一览表</option>
                </select>
            </li>
            <li>
                <span class="title-yck">文书统计表</span>
                <select class="" title="文书统计表">
                    <option value="ws1">文书案卷归档目录一览表</option>
                    <option value="ws2">文书案卷卷册页数量一览表</option>
                </select>
            </li>
        </ul>
        <div class="layui-tab-content layui-tab-Statis2">
            <div class="layui-tab-item layui-show ">
                <div class="layui-tab-Statis2yck" id="ss1">
                    <table class="layui-hide" id="test1" lay-filter="test1"></table>
                </div>
                <div class="layui-tab-Statis2yck" id="ss2">
                    <table class="layui-hide" id="test2" lay-filter="test2"></table>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab-Statis2yck" id="ws1">
                    <table class="layui-hide" id="test3" lay-filter="test3"></table>
                </div>
                <div class="layui-tab-Statis2yck" id="ws2">
                    <table class="layui-hide" id="test4" lay-filter="test4"></table>
                </div>
            </div>
        </div>
    </div>
</div>


@section scripts{
    <script type="text/html" id="toolbarDemo1">
        <div class="layui-btn-container">
            <input type="text" class="layui-input Yeardate" id="Yeardate1"  name="Yeardate1" placeholder="开始年度 - 结束年度">
            <button class="layui-btn layui-btn-sm" data-type="reload">搜索</button>
        </div>
    </script>
    <script type="text/html" id="toolbarDemo2">
        <div class="layui-btn-container">
            <input type="text" id="Yeardate2" class="layui-input Yeardate" name="Yeardate2" placeholder="年度">
            <button class="layui-btn layui-btn-sm" data-type="reload">搜索</button>
        </div>
    </script>
    <script type="text/html" id="toolbarDemo3">
        <div class="layui-btn-container">
            <input type="text" id="Yeardate3" class="layui-input Yeardate"  name="Yeardate3" placeholder="开始年度 - 结束年度">
            <button class="layui-btn layui-btn-sm" data-type="reload">搜索</button>
        </div>
    </script>
    <script type="text/html" id="toolbarDemo4">
        <div class="layui-btn-container">
            <input type="text" id="Yeardate4" class="layui-input Yeardate"   name="Yeardate4" placeholder="年度">
            <button class="layui-btn layui-btn-sm" data-type="reload">搜索</button>
        </div>
    </script>
    <script>
        layui.use(['element', 'table', 'laydate', 'form'], function () {
            var element = layui.element, table = layui.table, laydate = layui.laydate, form = layui.form;

            element.on('tab(tab-echart)', function (data) {
                $('.layui-tab-Statis2yck').hide();
                if (data.index == 0) {
                    $('#ss1').show();
                } else if (data.index == 1) {
                    $('#ws1').show();
                }
            });

            form.on('select()', function (data) {
                $('.layui-tab-Statis2yck').hide();
                $('#' + data.value).show();

            })

            // table1
            var table1 = table.render({
                elem: '#test1'
                , data: [{ 'thisYear': '20011', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }, { 'thisYear': '2002', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }]
                , toolbar: '#toolbarDemo1' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print']
                , title: '用户数据表'
                , totalRow: true
                , cols: [[
                    { field: 'thisYear', title: '年度', align: 'center', totalRowText: "合计:" }
                    , { field: 'JuanShu', title: '卷数', align: 'center', totalRow: true }
                    , { field: 'JianShu', title: '件数', align: 'center', totalRow: true }
                    , { field: 'PageCount', title: '页数', align: 'center', totalRow: true }
                    , { field: 'TiaoShu', title: '条数', align: 'center', totalRow: true }
                ]]
            });
            laydate.render({
                elem: '#Yeardate1'
                , type: 'year'
                , range: true
            });
            var table1 = table.render({
                elem: '#test2'
                , data: [{ 'thisYear': '2001', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }, { 'thisYear': '2002', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }]
                , toolbar: '#toolbarDemo2' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print']
                , title: '用户数据表'
                , totalRow: true
                , cols: [[
                    { field: 'thisYear', title: '年度', align: 'center', totalRowText: "合计:" }
                    , { field: 'JuanShu', title: '卷数', align: 'center', totalRow: true }
                    , { field: 'JianShu', title: '件数', align: 'center', totalRow: true }
                    , { field: 'PageCount', title: '页数', align: 'center', totalRow: true }
                    , { field: 'TiaoShu', title: '条数', align: 'center', totalRow: true }
                ]]
            });
            laydate.render({
                elem: '#Yeardate2'
                , type: 'year'
            });
            var table1 = table.render({
                elem: '#test3'
                , data: [{ 'thisYear': '2001', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }, { 'thisYear': '2002', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }]
                , toolbar: '#toolbarDemo3' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print']
                , title: '用户数据表'
                , totalRow: true
                , cols: [[
                    { field: 'thisYear', title: '年度', align: 'center', totalRowText: "合计:" }
                    , { field: 'JuanShu', title: '卷数', align: 'center', totalRow: true }
                    , { field: 'JianShu', title: '件数', align: 'center', totalRow: true }
                    , { field: 'PageCount', title: '页数', align: 'center', totalRow: true }
                    , { field: 'TiaoShu', title: '条数', align: 'center', totalRow: true }
                ]]
            });
            laydate.render({
                elem: '#Yeardate3'
                , type: 'year'
                , range: true
            });
            var table1 = table.render({
                elem: '#test4'
                , data: [{ 'thisYear': '2001', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }, { 'thisYear': '2002', 'JuanShu': '10', 'JianShu': '100', 'PageCount': '200', 'TiaoShu': '400' }]
                , toolbar: '#toolbarDemo4' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print']
                , title: '用户数据表'
                , totalRow: true
                , cols: [[
                    { field: 'thisYear', title: '年度', align: 'center', totalRowText: "合计:" }
                    , { field: 'JuanShu', title: '卷数', align: 'center', totalRow: true }
                    , { field: 'JianShu', title: '件数', align: 'center', totalRow: true }
                    , { field: 'PageCount', title: '页数', align: 'center', totalRow: true }
                    , { field: 'TiaoShu', title: '条数', align: 'center', totalRow: true }
                ]]
            });
            laydate.render({
                elem: '#Yeardate4'
                , type: 'year'
                , range: true
            });
        })
    </script>
}